<template>
	<view class="login-box">
		<view class="admin-logo">
			<image :src="logo" mode="heightFix"></image>
		</view>
		<view class="uni-header no-padding">
			<view class="uni-title">系统登录</view>
		</view>
		<view class="uni-container">
			<uni-forms ref="form" v-model="formData" :rules="rules" @submit="submit">
				<uni-forms-item left-icon="person-filled" name="username" labelWidth="35">
					<input ref="usernameInput" @confirm="submitForm" class="uni-input-border" type="text"
						placeholder="账户" v-model="formData.username" />
				</uni-forms-item>
				<uni-forms-item left-icon="locked-filled" class="icon-container" name="password" labelWidth="35">
					<input ref="passwordInput" @confirm="submitForm" class="uni-input-border" :password="showPassword"
						placeholder="密码" v-model="formData.password" />
					<text class="uni-icon-password-eye pointer" :class="[!showPassword ? 'uni-eye-active' : '']"
						@click="changePassword">&#xe568;</text>
				</uni-forms-item>
				<uni-forms-item v-if="needCaptcha" left-icon="image" class="icon-container"
					name="captcha" labelWidth="35">
					<input ref="captchaInput" @confirm="submitForm" class="uni-input-border" type="text"
						placeholder="验证码" v-model="formData.captcha" />
					<view class="admin-captcha-img pointer" @click="createCaptcha">
						<i v-if="captchaLoading" class="uni-loading"></i>
						<img v-else :src="captchaBase64" width="100%" height="100%" />
					</view>
				</uni-forms-item>
				<view class="uni-button-group">
					<button class="uni-button uni-button-full" type="primary" :loading="loading" :disabled="loading"
						@click="submitForm">登录</button>
				</view>
			</uni-forms>
			<view class="uni-tips">
				<text class="uni-tips-text" @click="initAdmin">如无管理员账号，请先创建管理员...</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions
	} from 'vuex'
	import config from '@/admin.config.js'
	import {
		getDeviceUUID
	} from '@/js_sdk/uni-admin/util.js'

	const captchaOptions = {
		deviceId: getDeviceUUID(),
		scene: 'login'
	}

	export default {
		data() {
			return {
				...config.navBar,
				indexPage: config.index.url,
				showPassword: true,
				loading: false,
				formData: {
					username: '',
					password: '',
					captcha: '',
				},
				captchaLoading: false,
				needCaptcha: false,
				captchaBase64: '',
				rules: {
					// 对name字段进行必填验证
					username: {
						rules: [{
								required: true,
								errorMessage: '请输入账户',
							},
							{
								minLength: 1,
								maxLength: 30,
								errorMessage: '账户长度在{minLength}到{maxLength}个字符',
							}
						]
					},
					// 对email字段进行必填验证
					password: {
						rules: [{
								required: true,
								errorMessage: '请输入正确的密码',
							},
							{
								minLength: 6,
								errorMessage: '密码长度大于{minLength}个字符',
							}
						]
					},
					// 对captcha字段进行必填验证
					captcha: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}]
					}
				}
			}
		},
		mounted() {
			// #ifdef H5
			// #ifndef VUE3
			this.focus()
			// #endif
			// #endif
			const self = this
			uni.getStorage({
				key: "lastUsername",
				success: function(res) {
					self.formData.username = res.data
				}
			})
			// this.getNeedCaptcha()
		},
		methods: {
			...mapActions({
				init: 'app/init'
			}),
			...mapMutations({
				setToken(commit, tokenInfo) {
					commit('user/SET_TOKEN', tokenInfo)
				}
			}),
			submit(event) {
				if (this.loading) {
					return
				}
				const {
					errors,
					value
				} = event.detail
				if (errors) {
					return
				}
				// #ifdef H5
				// #ifndef VUE3
				this.$refs.usernameInput.$refs.input.blur()
				this.$refs.passwordInput.$refs.input.blur()
				this.$refs.captchaInput && this.$refs.captchaInput.$refs.input.blur()
				// #endif
				// #endif
				this.loading = true
				this.$request('login', {
					...value,
					captchaOptions
				}, {
					functionName: 'uni-id-cf',
					showModal: false
				}).then(res => {
					this.setToken({
						token: res.token,
						tokenExpired: res.tokenExpired
					})
					return this.init().then(() => {
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						})
						uni.setStorage({
							key: 'lastUsername',
							data: value.username
						});
						uni.redirectTo({
							url: this.indexPage,
						})
					})
				}).catch(err => {
					if (err.needCaptcha) {
						this.formData.captcha = ''
						this.createCaptcha()
						this.needCaptcha = true
					}
					const that = this
					uni.showModal({
						content: err.message || '请求服务失败',
						showCancel: false,
						success: function() {
							// #ifdef H5
							// #ifndef VUE3
							if (err.code === 10101 && that.$refs.usernameInput) {
								that.$refs.usernameInput.$refs.input.focus()
							}
							if (err.code === 10102 && that.$refs.passwordInput) {
								that.$refs.passwordInput.$refs.input.focus()
							}
							if (err.code === 10002 && that.$refs.captchaInput) {
								that.$refs.captchaInput.$refs.input.focus()
							}
							// #endif
							// #endif
						}
					})
				}).finally(err => {
					this.loading = false
				})

			},

			createCaptcha() {
				this.captchaLoading = true
				this.$request('createCaptcha', captchaOptions, {
					functionName: 'uni-id-cf'
				}).then(res => {
					if (res.code === 0) {
						this.captchaBase64 = res.captchaBase64
					}
				}).catch(err => {}).finally(err => {
					this.captchaLoading = false
				})
			},

			confirmForm(name, value) {
				// this.binddata(name, value)
				this.submitForm()
			},
			submitForm() {
				this.$refs.form.submit()
			},
			initAdmin() {
				uni.redirectTo({
					url: '/pages/demo/init/init'
				})
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			// #ifdef H5
			focus: function() {
				this.$refs.usernameInput.$refs.input.focus()
			},
			// #endif
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		background-color: #fff;
	}

	.login-box {
		position: relative;
		max-width: 350px;
		flex: 1;
		padding: 140px 35px 0;
		margin: 0 auto;
		overflow: hidden;
		/* background-color: #F5F5F5; */
	}


	.underline:hover {
		text-decoration: underline;
	}

	.uni-tips {
		display: flex;
		justify-content: flex-end;
		margin-top: 15px;
	}

	.uni-tips-text {
		cursor: pointer;
		text-decoration: underline;
		font-size: 13px;
		color: #007AFF;
		opacity: 0.8;
	}

	.no-padding {
		padding: 0;
	}

	.admin-logo {
		display: flex;
		justify-content: center;
		margin-bottom: 30px;
	}

	.admin-logo image {
		height: 40px;
	}

	.admin-captcha-img {
		position: absolute;
		top: 1px;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		width: 100px;
		height: 33px;
		border: 1px #E5E5E5 solid;
		border-radius: 0 5px 5px 0;
		background-color: #f9f9f9;
	}

	.admin-captcha-img img {
		border-radius: 5px;
	}

	.uni-loading:before {
		background: rgba(0, 0, 0, 0) url("") no-repeat
	}

	.uni-loading {
		margin: 0 auto;
		width: 20px;
		height: 20px;
		display: inline-block;
		vertical-align: middle;
		-webkit-animation: uni-loading 1s steps(12) infinite;
		animation: uni-loading 1s steps(12) infinite;
		background-size: 100%
	}

	@-webkit-keyframes uni-loading {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn)
		}
	}

	@keyframes uni-loading {
		0% {
			-webkit-transform: rotate(0deg);
			transform: rotate(0deg)
		}

		to {
			-webkit-transform: rotate(1turn);
			transform: rotate(1turn)
		}
	}
</style>
